<template>
	<view class="app-container">
		<Title>播放列表</Title>
		<view class="item-list">
			<view class="item" v-for="(item, index) in list" :key="item" @click="playCurrent(index)">
				<view class="song-info">
					<!-- {{ item }} -->
					<text class="title">{{ item.name }}</text>
					<text class="level" :class="{'disabled': item.qqVip != 1}">VIP</text>
					<!-- <text class="level voice-level">全景声</text> -->
				</view>
				<text class="singer">{{ item.artistName }}</text>

			</view>
		</view>
	</view>
</template>

<script>
	import { playMusic } from '@/apis/music.js'
	export default {
		props: ['list'],
		data() {
			return {
				song: [
					'', '最炫民族风', '认错', '玫瑰花的葬礼', '爱上你是我的错', '清明雨上', '绅士', '可不可以喜欢我一下', '可惜没如果', '小酒窝', '青花瓷'
				]
			}
		},
		methods: {
			async playCurrent(index) {
				let list = this.list.map(item => {
					return {
						audioId: item.audioId,
						songId: item.cpId,
						during: item.duration,
						url: item.playUrl
					}
				})
				await playMusic({
					deviceId: this.DeviceId,
					musiList: list,
					offset: index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		width: 300px;
		padding-top: 0 !important;

		.item-list {
			.item {
				padding: 5px 0;
				border-bottom: 1px solid #efefef;

				.singer {
					color: #999;
					line-height: 20px;
				}
			}
		}
	}
</style>